<template>
  <div class="app-container">
    <common-page title="人员管理">
      <avue-crud
        ref="crud"
        v-model="form"
        class="crud-table"
        :option="tableOption"
        :data="list"
        :page.sync="page"
        :search.sync="searchForm"
        :table-loading="loading"
        :header-cell-class-name="() => 'crud-table-head'"
        :cell-class-name="() => 'crud-cell'"
        @on-load="getList()"
        @search-change="searchChange"
        @refresh-change="getList()"
        @search-reset="getList()"
        @selection-change="selectionChange"
      >
        <template #searchMenu="{ size }">
          <el-button type="primary" :size="size" @click="searchChange">查 询</el-button>
          <el-button type="primary" plain :size="size" @click="resetForm">重 置</el-button>
        </template>
        <template slot="status" slot-scope="scope">
          <!-- <el-tag>{{ scope.row.status }}</el-tag> -->
          <span>{{ scope.row.status === 1 ? '启用' : '停用' }}</span>
          <el-switch
            :value="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="
              val => {
                setRoleStatus(val, scope.row)
              }
            "
          >
          </el-switch>
        </template>
        <!-- <template #menu="{ size, type, row }">
          <el-button v-if="row.type != 2" :size="size" :type="type" @click="showRoleMenuDialog(row)">编辑权限</el-button>
        </template> -->
      </avue-crud>
    </common-page>
  </div>
</template>

<script>
import { getUserPage } from '@/api/user'
import { getPostList } from '@/api/post'
import { tableOption } from './tableOption'
// import Search from "./components/search";
export default {
  name: 'Person',
  components: {},
  data() {
    return {
      searchForm: {},
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      list: [{ roleName: '1123' }],
      departs: [],
      selectedIds: [],
      loading: true,
      form: {},
      positions:[]
    }
  },
  computed: {
    tableOption() {
      return tableOption.call(this)
    },
    documentHeight() {
      return this.$store.state.app.documentClientHeight
    },
  },

  mounted() {
    this.getPositionList()
  },
  methods: {
    resetForm() {
      this.$refs.crud.searchReset()
    },
    selectionChange(list) {
      const selectedIds = list.map(val => val.id)
      this.selectedIds = selectedIds
    },
    /**
     * 获取列表
     * @param {object} option 查询参数
     */
    async getList(option) {
      this.loading = true
      const { result } = await getUserPage({
        pageNumber: this.page.currentPage,
        pageSize: this.page.pageSize,
        ...this.searchForm,
        ...(option || ''),
      })
      this.list = result.records
      this.page.total = result.total
      this.loading = false
    },
    searchChange(form, done) {
      this.page.currentPage = 1
      this.getList(form || '')
      done && done()
    },
    // 职位
    async getPositionList(){
      const {result}  =  await getPostList()
      this.positions = result
      console.log("🤡 ~ result:-( ", result)
    },
        // 职位
    async getDepartList(){
      const {result}  =  await getPostList()
      this.positions = result
      console.log("🤡 ~ result:-( ", result)
    },
    /**
     * 单个删除
     */
    handleDelete(row, index) {
      this.$confirm('是否确认删除该角色?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        deleteOne({ id: row.id })
          .then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    /**
     * 新增
     */
    create(row, done, loading) {
      add(row)
        .then(() => {
          this.getList()
          done()
          this.$message.success('创建成功')
        })
        .catch(() => {
          loading()
        })
    },

    /**
     * 修改更新
     */
    update(row, index, done, loading) {
      const data = {
        id: row.id,
        roleCode: row.roleCode,
        roleDesc: row.roleDesc,
        roleName: row.roleName,
        roleOrder: row.roleOrder,
        status: row.status,
      }
      edit(data)
        .then(() => {
          this.getList()
          done()
          this.$message.success('修改成功')
        })
        .catch(() => {
          loading()
        })
    },
    /**
     * 修改角色状态
     * @param  val 状态值
     * @param {object} role 角色数据
     */
    setRoleStatus(val, role) {
      this.$confirm(`是否确认${val === 1 ? '启用' : '停用'}该角色？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        updateStatus({
          id: role.id,
          status: val,
        }).then(() => {
          this.getList()
          this.$message.success('操作成功')
        })
      })
    },

  },
}
</script>

<style lang="scss" scoped></style>
